<template>
  <div class="listDirectorySet">
    <listPageContent>
      <template v-slot:box-content>
        <div style="margin: 12px 15px 8px 15px;">
          <div style="font-size:15px;margin-bottom:15px" class="flexBetween">
            <div style="font-size:18px;font-weight:bold;color: #202d40;">清单目录设置</div>
          </div>
          <div style="color:#999;font-size:12px;padding-left:20px;margin-bottom:10px">施工单位</div>
          <div
            v-for="item in unitList"
            :key="item.id"
            class="defaultUnit"
            :class="orgId==item.id?'activeUnit':''"
            @click="onClickList(item.id,item.tenderCode)"
          >{{item.tenderCode}}</div>
        </div>
      </template>
      <template v-slot:right-content style=" position:relative">
        <div class="flexBetweenCenter" style="margin-bottom:8px;">
          <div class="rightTitle">{{tenderCode}}</div>
          <div style="margin-right:30px">
            <a-button type="primary" @click="onAdd">新增</a-button>
          </div>
        </div>
        <div class="selectDivBottom"></div>
        <div class="tableDiv">
          <vxeTableCom
            :tableData="tableData"
            :loading="loading"
            detailName="删除"
            tableTitle="清单目录配置"
            @tableDetail="tableDetail"
          ></vxeTableCom>
        </div>
        <div style="position:absolute;bottom:0;width:calc(100% - 450px);">
          <vxePage style="width:100%" :pageData="pageData" @pageChange="pageChange" />
        </div>
      </template>
    </listPageContent>

    <!-- 详情 -->
    <div class="tableDrawer">
      <a-drawer
        title="新增"
        placement="right"
        :visible="visibleDrawer"
        :maskClosable="false"
        @close="onClose"
        :width="800"
      >
        <a-spin :spinning="detailLoading">
          <div class="content" style="width:100%;height:88vh">
            <!-- <markingDetail
              v-if="!detailLoading"
              ref="markingDetail"
              :wbsName="wbsName"
              :frontWbsId="wbsId"
              :orgId="orgId"
              :projectId="projectId"
              @onCancle="onCancle"
            />-->
            <div class="sortInput flexStart">
              <div style="padding-top:8px;margin-right: 5px;">排序：</div>
              <a-form-model ref="ruleForm" :model="form" :rules="rules">
                <a-form-model-item ref="sortData" prop="sortData">
                  <a-input placeholder="请输入排序" v-model="form.sortData" style="width:600px" />
                </a-form-model-item>
              </a-form-model>
            </div>
            <div class="treeDrawerDiv flexStart">
              <div style="padding-top:8px">节点：</div>
              <treeNoSearch
                v-if="!detailLoading"
                :treeData="unitTreeData"
                :defaultSelectKeys="defaultSelectKeysTree"
                @treeKey="treeKey"
                :expandFlag="false"
              />
            </div>

            <div class="flexCenter" v-if="!detailLoading">
              <a-button style="margin-right:20px" @click="onCancle">取消</a-button>
              <a-button type="primary" @click="onSubmit">确定</a-button>
            </div>
          </div>
        </a-spin>
      </a-drawer>
    </div>
  </div>
</template>

<script>
import vxeTableCom from '@/components/vxeTable/index'
import vxePage from '@/components/vxePage/index'
import pageContent from '@/components/pageContent/index'
import listPageContent from '@/components/listPageContent/index'

import { getManageByUserId, getPagingQuery, getWbsConfigTree, getWbsDeleted, getWbsAdd } from '@/api/listDirectorySet.js'
import treeNoSearch from '@/components/tree/treeNoSearch'
import XEUtils from 'xe-utils'
export default {
  name: 'listDirectorySet',
  components: {
    vxeTableCom,
    pageContent,
    vxePage,
    treeNoSearch,
    listPageContent
  },
  data() {
    return {
      userId: 111,
      unitList: [],
      loading: true,
      tableData: [],
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      orgId: '',
      tenderCode: '',
      defaultSelectKeysTree: [],
      unitTreeData: [],
      //抽屉
      visibleDrawer: false,
      detailLoading: false,
      treeInfo: {
        id: '',
        name: ''
      },
      form: {
        sortData: ''
      },

      rules: {
        sortData: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'change'
          },
          {
            required: true,
            message: '请输入整数',
            trigger: 'change',
            pattern: new RegExp(/^[0-9]\d*$/, 'g')
          }
        ]
      }
    }
  },
  mounted() {
    this.getUnitList()
  },
  methods: {
    //获取施工列表
    getUnitList() {
      let data = {
        userId: this.$store.state.userInfo.id
      }
      this.defaultUnitFlag = false
      getManageByUserId(data).then((res) => {
        // console.log(res);
        if (res.data.length > 0) {
          this.unitList = res.data
          this.orgId = this.unitList[0].id

          this.tenderCode = this.unitList[0].tenderCode
          this.getTable()
        }
      })
    },
    //点击表格操作
    async tableDetail(val) {
      let res = await getWbsDeleted({ id: val.id })
      this.$message.destroy()
      this.$message.success('删除成功')

      this.getTable()
    },
    onAdd() {
      this.treeInfo.id = ''
      this.form.sortData = ''
      this.visibleDrawer = true

      this.getDetail()
    },
    pageChange(currentPage, pageSize) {
      this.pageData.currentPage = currentPage
      this.pageData.pageSize = pageSize
      this.getTable()
    },
    getTable() {
      this.loading = true
      let data = {
        orgId: this.orgId,
        page: this.pageData.currentPage,
        size: this.pageData.pageSize
      }
      getPagingQuery(data).then((res) => {
        // console.log(res)
        this.tableData = res.data
        this.loading = false
        this.pageData.totalResult = res.total
      })
    },
    onClickList(val, tenderCode) {
      this.orgId = val
      this.tenderCode = tenderCode
      this.getTable()
    },
    //获取详情
    getDetail() {
      this.detailLoading = true
      let data = {
        orgId: this.orgId
      }
      getWbsConfigTree(data).then((res) => {
        this.unitTreeData = XEUtils.mapTree(res.data, (item) => {
          let disabledFlag = false
          if (item.optional == 0) {
            disabledFlag = true
          }
          return {
            ...item,
            key: item.id,
            title: item.name,
            disabled: disabledFlag
          }
        })
        this.detailLoading = false
      })
    },
    treeKey(val) {
      // console.log(val)
      this.treeInfo.id = val
      // this.parentWbsId = val
    },
    onClose() {
      this.visibleDrawer = false
    },
    onSubmit() {
      if (this.treeInfo.id) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let data = {
              createId: this.$store.state.userInfo.id,
              dataId: this.treeInfo.id,
              sort: this.form.sortData,
              orgId: this.orgId,
              type: '1'
            }
            let res = getWbsAdd(data)
            // console.log(res)
            res.then((item) => {
              if (item.code == 200) {
                this.$message.destroy()
                this.$message.success('新增成功')
                this.visibleDrawer = false
                this.getTable()
              } else {
                this.$message.destroy()
                this.$message.success(item.message)
              }
            })
          } else {
            return false
          }
        })
      } else {
        this.$message.destroy()
        this.$message.success('请选择节点')
      }

      // this.$refs.markingDetail.onSubmit()
      // this.getChildList()
    },
    onCancle() {
      this.visibleDrawer = false
    }
  }
}
</script>

<style lang="less" scoped>
.activeUnit {
  background: #ebf3ff;
  color: #0066ff !important;
}
.defaultUnit {
  font-size: 13px;
  color: #333;
  padding: 9px 20px;
  margin-bottom: 5px;
  cursor: pointer;
}
.rightTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding-left: 15px;
}
.selectDivBottom {
  background: #f7f9fc;
  height: 7px;
}
.treeDrawerDiv {
  width: 100%;
  height: calc(82vh - 50px);
  margin-bottom: 15px;
  overflow: auto;
}
.treeDrawerDiv ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.treeDrawerDiv ::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.treeDrawerDiv ::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.sortInput {
  // margin-bottom: 15px;
}
</style>
